<template>
    <div class="app-container home">
        <div class="content">
            <div class="title">基本信息</div>
            <div class="info">
                <div class="item">
                    <div class="left">姓名</div>
                    <div class="right">
                        {{ info.agentBean.agentName }}
                    </div>
                </div>
                <div class="item">
                    <div class="left">服务商编号</div>
                    <div class="right">
                        {{ info.agentBean.agentNo }}
                    </div>
                </div>
                <div class="item">
                    <div class="left">手机号</div>
                    <div class="right">
                        {{ info.agentBean.phoneNo }}
                        <!-- <a :href="'tel:' + info.agentBean.phoneNo"><img style="height: 20px;width: 20px;margin-left: 10px" src="@/assets/merchantPhoneImg.png" alt="" /></a> -->
                    </div>
                </div>
                <div class="item">
                    <div class="left">入网时间</div>
                    <div class="right">
                        {{ parseTime(info.agentBean.createTime) }}
                    </div>
                </div>
                <div class="item" v-if="obj.agentInfo.agentBean.profitGrade">
                    <div class="left">服务商级别</div>
                    <div class="right">
                        {{ obj.agentInfo.agentBean.profitGrade }}
                    </div>
                </div>
                <div class="item" v-if="obj.giftPackageValidDay">
                    <div class="left">礼包有效期倒计时</div>
                    <div class="right">
                        {{ obj.giftPackageValidDay }}
                    </div>
                </div>
                <div class="item" v-if="obj.sumCount">
                    <div class="left">团队合伙人总数</div>
                    <div class="right">
                        {{ obj.sumCount }}
                    </div>
                </div>
            </div>
        </div>
        <div class="content" style="margin-top: 10px">
            <div class="title" @click="showDate = true">
                <text v-if="!startDate&&!endDate">商户统计：全部</text>
                <text v-else>商户统计：{{ startDate +' - '+ endDate }}</text>
                <img src="@/assets/chevron-down@2x.png" style="width: 22px" />
            </div>
            <div class="info">
                <div class="item" v-if="obj.qualifyCount">
                    <div class="left">达标商户总数</div>
                    <div class="right">
                        {{ obj.qualifyCount }}
                    </div>
                </div>
                <div class="item" v-if="obj.effectiveCount">
                    <div class="left">有效商户总数</div>
                    <div class="right">
                        {{ obj.effectiveCount }}
                    </div>
                </div>
            </div>
        </div>
        <div class="content" style="margin-top: 10px">
            <div class="title">认证信息</div>
            <div class="info">
                <div class="item">
                    <div class="left">姓名</div>
                    <div class="right">
                        {{ info.settleInfoBean.bankAccountName }}
                    </div>
                </div>
                <div class="item">
                    <div class="left">身份证号</div>
                    <div class="right">
                        {{ replaceStr(6, 16, info.settleInfoBean.identityNo) }}
                    </div>
                </div>
            </div>
        </div>
        <div class="content" style="margin-top: 10px">
            <div class="title">结算信息</div>
            <div class="info">
                <div class="item">
                    <div class="left">卡号</div>
                    <div class="right">
                        {{ info.settleInfoBean.bankAccountNo }}
                    </div>
                </div>
                <div class="item">
                    <div class="left">开户行</div>
                    <div class="right">
                        {{ info.settleInfoBean.bankName }}
                    </div>
                </div>
                <div class="item">
                    <div class="left">手机号</div>
                    <div class="right">
                        {{ info.settleInfoBean.prePhone }}
                    </div>
                </div>
            </div>
        </div>
        <div class="content" style="margin-top: 10px">
            <div class="title">下级情况</div>
            <div class="info">
                <div class="item">
                    <div class="left">下级总库存数</div>
                    <div class="right">
                        {{ obj.TOTAL_NUM }}
                    </div>
                </div>
                <div class="item">
                    <div class="left">唤醒总数</div>
                    <div class="right">
                        {{ obj.ACT_TOTAL_NUM }}
                    </div>
                </div>
                <div class="item">
                    <div class="left">未唤醒数</div>
                    <div class="right">
                        {{ obj.TOTAL_NUM - obj.ACT_TOTAL_NUM }}
                    </div>
                </div>

                <div class="item">
                    <div class="left">交易量</div>
                    <div class="right">
                        {{ obj.CUR_MONTH_TRANS_AMOUNT + '元' }}
                    </div>
                </div>
            </div>
        </div>
<!--        <div class="content" style="margin-top: 10px">-->
<!--            <div class="title">结算周期</div>-->
<!--            <div class="info">-->
<!--                <div class="item" @click="openShow()">-->
<!--                    <div class="left">结算周期</div>-->
<!--                    <div class="right">-->
<!--                        {{ info.agentBean.profitSettleType === 'DAY' ? '日结' : '不结' }}-->
<!--                        <img class="chevron-right" src="@/assets/chevron-down@2x.png" alt="" />-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <van-action-sheet
            v-model:show="show"
            :actions="actions"
            cancel-text="取消"
            close-on-click-action
            @cancel="onCancel"
            @select="onSelect"
        />
<!--        <van-popup position="bottom" v-model:show="showDate">-->
            <van-calendar allow-same-day :min-date="minDate" :show-confirm="false" v-model:show="showDate" type="range" @confirm="onConfirm" />
<!--        </van-popup>-->
    </div>
</template>

<script setup name="agentDetail">
import store from '@/store/index'
import { agentFindByAgentNo, changeProfitSettleType, findAgentInfoByAgentNo } from '@/api/agent'
import { parseTime, replaceStr } from '@/utils/utils'
import { showSuccessToast } from 'vant'
const route = useRoute()
const show = ref(false)
const showDate = ref(false)
const startDate = ref('')
const endDate = ref('')
const minDate = ref(new Date(2023, 0, 1),)
const info = ref({
    agentBean: {},
    settleInfoBean: {}
})
const obj = ref({})
console.log(route.query.agentNo)
const actions = [{ name: '日结' }, { name: '不结' }]
const onCancel = () => {
    show.value = false
}
const openShow = () => {
    show.value = true
}
const onSelect = e => {
    changeProfitSettleType({
        targetAgentNo: info.value.agentBean.agentNo,
        profitSettleType: e.name === '日结' ? 'DAY' : 'NOT'
    }).then(res => {
        showSuccessToast('修改成功')
        getAgentFindByAgentNo()
    })
}
const onConfirm = (e)=>{
    console.log(e)

    startDate.value = parseTime(e[0],'{y}-{m}-{d}')
    endDate.value = parseTime(e[1],'{y}-{m}-{d}')
    getAgentFindByAgentNo()
    showDate.value = false
}
const getAgentFindByAgentNo = () => {
    findAgentInfoByAgentNo({
        agentNo: route.query.agentNo,
        startTime: startDate.value,
        endTime: endDate.value,
    }).then(res => {
        info.value = res.object.agentInfo
        obj.value = res.object
    })
}
getAgentFindByAgentNo()
</script>

<style scoped lang="scss">
.app-container {
    padding: 10px;

    .content {
        background: #ffffff;
        opacity: 1;
        border-radius: 6px;

        .title {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 1px solid #f5f5f5;
            color: #000000;
            opacity: 1;
        }

        .info {
            padding: 0 10px;

            .item {
                padding: 0 10px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #545454;
                height: 47px;
                border-bottom: 1px solid #f5f5f5;
                opacity: 1;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .right {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .chevron-right {
                        height: 20px;
                        width: 20px;
                    }
                }
            }
        }
    }
}
</style>
